<template>
  <a-card :bordered="false" style="width: 100%;margin-top: 20px">
    <div class="table-page-search-wrapper my-menu">
      <a-input v-model="articleTitle" placeholder="请输入文章标题"/>
      <a-button @click="publishArticle" shape="circle" style="margin-left: 10px">
        <svg-icon icon-class="push"/>
      </a-button>
      <a-button @click="onPreview()" shape="circle" style="margin: 0 10px">
        <svg-icon icon-class="preview"/>
      </a-button>
      <!--      <a-form layout="inline">-->
      <!--        <a-row :gutter="12">-->
      <!--          <a-col  :xs="17" :sm="19" :md="20" :lg="21">-->
      <!--            <a-form-item label="">-->
      <!--              <a-input v-model="articleTitle" placeholder="请输入文章标题"/>-->
      <!--            </a-form-item>-->
      <!--          </a-col>-->
      <!--          &lt;!&ndash;            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">&ndash;&gt;-->
      <!--          &lt;!&ndash;              <a-button type="primary" icon="form" @click="saveDraft">保存草稿</a-button>&ndash;&gt;-->
      <!--          &lt;!&ndash;              <a-button type="primary" icon="to-top" style="margin-left: 8px" @click="publishArticle">发布文章</a-button>&ndash;&gt;-->
      <!--          &lt;!&ndash;            </span>&ndash;&gt;-->
      <!--          <a-col :xs="7" :sm="5" :md="4" :lg="3">-->
      <!--            <a-button @click="publishArticle" shape="circle">-->
      <!--              <svg-icon icon-class="push"/>-->
      <!--            </a-button>-->
      <!--            <a-button @click="publishArticle" shape="circle" style="margin-left: 10px">-->
      <!--              <svg-icon icon-class="preview"/>-->
      <!--            </a-button>-->
      <!--          </a-col>-->

      <!--        </a-row>-->
      <!--      </a-form>-->
    </div>
    <ants-mark-down v-model="articleContentMd" :view-value="articleContentMd" @inputHtml="inputHtml"
                    v-if="editorType === '1'"
    />
    <my-editor ref="MyEditor" v-else @onChange="onChange"/>
    <publish-modal ref="modalForm"/>
    <a-modal
      :title="articleTitle ? articleTitle : '请先输入标题'"
      width="80%"
      :visible="previewVisible"
      cancel-text="关闭"
      @ok="previewVisible = false"
      @cancel="previewVisible = false"
    >
      <template slot="footer">
        <a-button key="back" @click="previewVisible = false">
          关闭
        </a-button>
      </template>
      <article class="joe_detail__article">
        <div
          id="content"
          v-highlight
          v-html="articleContentHtml"
          style="width: 100%"
        />

      </article>

    </a-modal>
  </a-card>
</template>

<script>
import AntsMarkDown from '@/components/ants/AntsMarkDown'
import PublishModal from './modules/PublishModal'
import {getAction} from '@/api/manage'
import MyEditor from '@/components/ants/MyEditor'
import {mapGetters} from "vuex";

export default {
  beforeRouteLeave(to, from, next) {
    // 这里需要elementui的支持，如果使用其他界面组件自行替换即可
    this.$confirm('正在离开本页面，本页面内所有未保存数据都会丢失', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 正常跳转
      next()
    }).catch(() => {
      // 如果取消跳转地址栏会变化，这时保持地址栏不变
      window.history.go(1)
    })
  },
  name: 'Publish',
  components: {
    MyEditor,
    AntsMarkDown,
    PublishModal
  },
  data() {
    return {
      articleTitle: '',
      articleContentMd: '',
      articleContentHtml: '',
      articleData: {},
      targetType: '0', // 0：新增；1：编辑；
      url: {
        getById: '/article/getById',
        renewalToken: '/sys/renewalToken',
      },
      editorType: this.$route.params.editorType,
      targetPath: this.$route.params.targetPath,
      previewVisible: false
    }
  },
  mounted() {
    getAction(this.url.renewalToken, {})
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))

    const recordId = this.$route.query.recordId
    if (recordId) {
      this.targetType = '1'
      getAction(this.url.getById, {id: recordId}).then(res => {
        if (res) {
          this.articleData = res.result
          document.title = this.articleData.title
          this.editorType = this.articleData.editorType
          this.articleTitle = this.articleData.title
          if (this.editorType === '1') {
            this.articleContentMd = this.articleData.content
            this.articleContentHtml = this.articleData.html
          } else {
            this.$refs.MyEditor.html = this.articleData.html
          }

        }
      })
    } else {
      this.articleData.editorType = this.editorType
    }
  },

  destroyed() {
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  methods: {
    beforeunloadFn(e) {

      // 这个事件只有在鼠标真正和浏览器有了交互，再刷新或者关闭时才会触发, 浏览器事件会弹框确认用户是否要离开页面

      e = e || window.event
      if (e) {
        e.returnValue = '关闭提示'
      }
      return '关闭提示'
    },
    publishArticle() {
      if (this.editorType === '2') {
        this.$refs.MyEditor.onChange()
      }
      if (this.articleTitle && this.articleContentHtml) {
        this.$refs.modalForm.articleTitle = this.articleTitle
        this.$refs.modalForm.articleContentMd = this.articleContentMd
        this.$refs.modalForm.articleContentHtml = this.articleContentHtml
        this.$refs.modalForm.targetType = this.targetType
        this.$refs.modalForm.targetPath = this.targetPath
        this.$refs.modalForm.add(this.articleData)
        this.$refs.modalForm.disableSubmit = false
      } else {
        this.$message.error('请填写文章标题或文章内容！')
      }

    }
    ,
    saveDraft() {
      this.$refs.modalForm.articleTitle = this.articleTitle
      this.$refs.modalForm.articleContentMd = this.articleContentMd
      this.$refs.modalForm.articleContentHtml = this.articleContentHtml
      // this.$refs.modalForm.add()
      // this.$refs.modalForm.title = '保存草稿'
      // this.$refs.modalForm.disableSubmit = false
    }
    ,
    inputHtml(html) {
      if (html) {
        this.articleContentHtml = html
      }
    },
    onChange(html, text) {
      if (html) {
        this.articleContentHtml = html
        // this.articleContentMd = text
      }
    },
    onPreview() {
      if (this.editorType === '2') {
        this.$refs.MyEditor.onChange()
      }
      this.previewVisible = true
    }
  }
}
</script>
<style>
.my-menu {
  display: flex;
  justify-content: flex-start;
  margin-bottom: 10px;
}
</style>
